<template>
    <div class="driver-task">
        <van-loading  type="spinner" color="white" v-if="isShow" style="margin: 0.5rem auto 0;"/>
        <div v-if="!isShow">
            <van-checkbox-group v-model="checkboxOrder">
                <van-row class="card" v-for="(item,index) in driverTaskOrder.related_pick_orders" :key="index" v-if="driverTaskOrder.related_pick_orders.length !== 0">
                    <van-row>
                        <van-col span="5" class="checkbox-top">
                            <van-checkbox :name="item.id" class="checkbox"></van-checkbox>
                        </van-col>
                        <van-col span="12" class="order-id">
                            <div @click="showOrder(item.id)">{{item.full_dingdong}}</div>
                        </van-col>
                        <van-col span="7" class="date">
                            <div @click="showOrder(item.id)">{{item.forecast_pickup_time.slice(11,16) + '~' +
                                item.forecast_complete_time.slice(11,16)}}
                            </div>
                        </van-col>
                    </van-row>
                    <div @click="showOrder(item.id)">
                        <van-row style="overflow: hidden;">
                            <van-col span="5" class="status">{{item.status_link}}</van-col>
                            <van-col span="9" class="product">
                                <template v-if="item.product.type==4" style="color:red">
                                    次{{item.forecast_complete_time.slice(8,10)}}
                                </template>
                                <template v-else>
                                    {{item.product?item.product.title:''}}
                                    {{item.forecast_complete_time.slice(8,10)}}号
                                </template>
                            </van-col>
                            <van-col span="10" class="types">{{item.res_link}} {{item.total_weight}}kg
                                {{item.volume_link}}
                            </van-col>
                        </van-row>
                        <van-row style="overflow: hidden;">
                            <van-col span="5">
                                <img src="../../assets/img/ji@2x.png" alt="" class="img">
                            </van-col>
                            <van-col span="19">
                                <van-col span="24"><span class="name">[{{item.pick_name}}]</span>
                                    <span class="tel">{{item.pick_phone}}</span></van-col>
                                <van-col span="24" class="address">{{item.pick_address}}{{item.pick_address_add}}</van-col>
                            </van-col>
                        </van-row>
                        <van-row style="overflow: hidden;">
                            <van-col span="5">
                                <img src="../../assets/img/shou@2x.png" alt="" class="img">
                            </van-col>
                            <van-col span="19">
                                <van-col span="24">
                                    <span class="name">[{{item.delivery_name}}]</span><span class="tel">{{item.delivery_phone}}</span>
                                </van-col>
                                <van-col span="24" class="address">{{item.delivery_address}}{{item.delivery_address_add}}</van-col>
                            </van-col>
                        </van-row>
                        <!--<van-row  style="overflow: hidden;"  v-if="item.executable_related_mission && item.executable_related_mission.length > 0 && item.inexecutable_related_mission[0]['kind'] !== 2">-->
                        <van-row style="overflow: hidden;" v-if="item.executable_related_mission && item.executable_related_mission.length > 0">
                            <van-col span="5" style="text-align: center">
                                任务:
                            </van-col>
                            <van-col :span="19">
                                <div>
                                    <span class="tel">{{item.executable_related_mission[0]['driver']['name']}}</span>
                                    前去
                                    <span class="tel">{{item.executable_related_mission[0]['address']}}</span>
                                </div>
                            </van-col>
                        </van-row>
                        <!--<van-row  style="overflow: hidden;"  v-if="item.inexecutable_related_mission && item.inexecutable_related_mission.length > 0  && item.inexecutable_related_mission[0]['kind'] !== 2">-->
                        <van-row style="overflow: hidden;" v-if="item.inexecutable_related_mission && item.inexecutable_related_mission.length > 0">
                            <van-col span="5" style="text-align: center">
                                任务:
                            </van-col>
                            <van-col :span="19">
                                <div>
                                    <span class="tel">{{item.inexecutable_related_mission[0]['driver']['name']}}</span>
                                    前去
                                    <span class="tel">{{item.inexecutable_related_mission[0]['address']}}</span>
                                </div>
                            </van-col>
                        </van-row>

                    </div>
                </van-row>
                <van-row class="card" v-for="(item,index) in driverTaskOrder.related_send_orders" :key="index" v-if="driverTaskOrder.related_send_orders.length !== 0">
                    <van-row>
                        <van-col span="5" class="checkbox-top">
                            <van-checkbox :name="item.id" class="checkbox"></van-checkbox>
                        </van-col>
                        <van-col span="12" class="order-id">
                            <div @click="showOrder(item.id)">{{item.full_dingdong}}</div>
                        </van-col>
                        <van-col span="7" class="date">
                            <div @click="showOrder(item.id)">{{item.forecast_pickup_time.slice(11,16) + '~' +
                                item.forecast_complete_time.slice(11,16)}}
                            </div>
                        </van-col>
                    </van-row>
                    <div @click="showOrder(item.id)">
                        <van-row style="overflow: hidden;">
                            <van-col span="5" class="status">{{item.status_link}}</van-col>
                            <van-col span="9" class="product">
                                <template v-if="item.product.type==4" style="color:red">
                                    次{{item.forecast_complete_time.slice(8,10)}}
                                </template>
                                <template v-else>
                                    {{item.product?item.product.title:''}}
                                    {{item.forecast_complete_time.slice(8,10)}}号
                                </template>
                            </van-col>
                            <van-col span="10" class="types">{{item.res_link}} {{item.total_weight}}kg
                                {{item.volume_link}}
                            </van-col>
                        </van-row>
                        <van-row style="overflow: hidden;">
                            <van-col span="5">
                                <img src="../../assets/img/ji@2x.png" alt="" class="img">
                            </van-col>
                            <van-col span="19">
                                <van-col span="24"><span class="name">[{{item.pick_name}}]</span>
                                    <span class="tel">{{item.pick_phone}}</span></van-col>
                                <van-col span="24" class="address">{{item.pick_address}}{{item.pick_address_add}}</van-col>
                            </van-col>
                        </van-row>
                        <van-row style="overflow: hidden;">
                            <van-col span="5">
                                <img src="../../assets/img/shou@2x.png" alt="" class="img">
                            </van-col>
                            <van-col span="19">
                                <van-col span="24">
                                    <span class="name">[{{item.delivery_name}}]</span><span class="tel">{{item.delivery_phone}}</span>
                                </van-col>
                                <van-col span="24" class="address">{{item.delivery_address}}{{item.delivery_address_add}}</van-col>
                            </van-col>
                        </van-row>
                        <!--<van-row  style="overflow: hidden;"  v-if="item.executable_related_mission && item.executable_related_mission.length > 0 && item.inexecutable_related_mission[0]['kind'] !== 2">-->
                        <van-row style="overflow: hidden;" v-if="item.executable_related_mission && item.executable_related_mission.length > 0">
                            <van-col span="5" style="text-align: center">
                                任务:
                            </van-col>
                            <van-col :span="19">
                                <div>
                                    <span class="tel">{{item.executable_related_mission[0]['driver']['name']}}</span>
                                    前去
                                    <span class="tel">{{item.executable_related_mission[0]['address']}}</span>
                                </div>
                            </van-col>
                        </van-row>
                        <!--<van-row  style="overflow: hidden;"  v-if="item.inexecutable_related_mission && item.inexecutable_related_mission.length > 0  && item.inexecutable_related_mission[0]['kind'] !== 2">-->
                        <van-row style="overflow: hidden;" v-if="item.inexecutable_related_mission && item.inexecutable_related_mission.length > 0">
                            <van-col span="5" style="text-align: center">
                                任务:
                            </van-col>
                            <van-col :span="19">
                                <div>
                                    <span class="tel">{{item.inexecutable_related_mission[0]['driver']['name']}}</span>
                                    前去
                                    <span class="tel">{{item.inexecutable_related_mission[0]['address']}}</span>
                                </div>
                            </van-col>
                        </van-row>

                    </div>
                </van-row>
            </van-checkbox-group>
            <div class="driver-task-no" v-if="driverTaskOrder.related_pick_orders.length == 0 && driverTaskOrder.related_send_orders.length == 0">
                无更多数据
            </div>
        </div>

        <div class="dialog-footer">
            <div  @click="checkedAll" style="width: 3rem;padding-left:0.1rem;line-height: 0.47rem;">
                <van-checkbox v-model="allChecked">全选</van-checkbox>
            </div>
            <div class="btn bgcolorfff" @click="closePopup">返回</div>
            <!--<div class="btn bgcolorff976a" @click="cancelTask">取消运单</div>-->
            <!--<div class="btn" @click="dispatchTask">指派</div>-->
        </div>
    </div>
</template>

<script>
    import {Row,Col,Button,Loading,Checkbox,CheckboxGroup,Toast} from 'vant';
    export default {
        name: "DiverTaskOrder",
        components: {
            [Row.name]: Row,
            [Button.name]: Button,
            [CheckboxGroup.name]: CheckboxGroup,
            [Checkbox.name]: Checkbox,
            [Toast.name]: Toast,
            [Loading.name]: Loading,
            [Col.name]: Col
        },
        props: {
            driverTaskOrder: {
                type: Object,
                default: () => {
                    return {}
                }
            },
            value: {
                type: Boolean,
                default: false
            }

        },
        data() {
            return {
                myValue: false,
                isShow: false,
                checkboxOrder:[],
                allChecked: false
            }
        },
        watch: {
            // checkboxOrder: function (newVal,oldVal) {
            //     if (newVal.length > 40) {
            //         Toast({
            //             message: '已勾选40单,还有' + Number(this.totalNum-40) + '单请下次指派',
            //             duration: 1500,
            //             type: 'fail'
            //         });
            //         this.checkboxModel = this.checkboxModel.slice(0,40);
            //         this.allChecked = false;
            //     } else {
            //         // if (this.activeTab === '0') {
            //         if (this.checkboxData.length > 0 && this.checkboxModel.length > 0 && this.checkboxModel.length === this.checkboxData.length) {
            //             this.allChecked = true;
            //         } else {
            //             this.allChecked = false;
            //         }
            //         // } else if (this.activeTab == '1') {
            //         //     this.allChecked = false;
            //         //     if (newVal && newVal.length === 2) {
            //         //         this.checkboxModel = [newVal[1]];
            //         //     } else if (newVal && newVal.length === 1) {
            //         //         this.checkboxModel = newVal;
            //         //     }
            //         // }
            //
            //     }
            //
            // },
            driverTaskOrder: function (val) {
                this.isShow = false;
            },
            value: function (val) {
                this.myValue = this.value;
            },
            myValue: function (val) {
                this.$emit('input', this.myValue);
            }
        },
        created() {
            this.isShow = true;
        },
        mounted() {
            this.myValue = this.value;
        },
        methods: {
            cancelTask() {

            }, // 批量取消订单
            dispatchTask() {
                if (this.checkboxOrder && this.checkboxOrder.length > 0) {
                    if (this.checkboxOrder.length <= 40) {
                        this.$emit('changeDispatch',this.checkboxOrder);
                    } else {
                        Toast({
                            message: '已勾选40单',
                            duration: 1500,
                            type: 'fail'
                        });
                    }
                } else {
                    Toast({
                        message: '请选择运单！',
                        duration: 1000
                    });
                }


            }, // 批量改派订单
            checkedAll() {
                if (!this.allChecked) {//实现反选
                    this.checkboxOrder = [];
                } else {//实现全选
                    this.checkboxOrder = [];
                    if (this.driverTaskOrder.related_pick_orders) {
                        this.driverTaskOrder.related_pick_orders.forEach(item => {
                            this.checkboxOrder.push(item.id);
                        });
                    }
                    if (this.driverTaskOrder.related_send_orders) {
                        this.driverTaskOrder.related_send_orders.forEach(item => {
                            this.checkboxOrder.push(item.id);
                        });
                    }

                }
            },
            showOrder(id) {
                console.info('id',id);
            },
            closePopup() {
                this.myValue = false;
            }
        }
    }
</script>

<style scoped lang="less">
    .driver-task{
        width: 100%;
        padding: 0 0.1rem 0.8rem;
        .van-checkbox__icon, .van-checkbox__label {
            height: 0.22rem !important;
            line-height: 0.19rem !important;
            font-size: 0.14rem !important;
            color: #4A4A4A !important;
            margin-left: 0.04rem !important;
        }
        .van-checkbox__icon .van-icon {
            width: 0.22rem !important;
            height: 0.22rem !important;
            border: 1px solid #108EE9 !important;
            line-height: 0.22rem !important;
        }
        .pdb10{
            padding-bottom: 0.05rem;
        }
        .imgs{
            width: 0.16rem;
            height: 0.16rem;
            position: relative;
            top: 0.01rem;
            margin-right: 0.1rem;
        }
        /*.card {*/
            /*margin: 0.08rem auto 0rem;*/
            /*padding: 0.12rem 0.22rem 0.12rem 0.12rem;*/
            /*box-shadow: 0 0.02rem 0.06rem 0 rgba(0, 0, 0, 0.04), 0 0.01rem 0.02rem 0 rgba(0, 0, 0, 0.04), 0 0.01rem 0.02rem 0 rgba(0, 0, 0, 0.18);*/
            /*border-radius: 10px;*/
            /*background-color: #fff;*/
            /*.icon-tab{*/
                /*width: 20px;*/
                /*height: 20px;*/
                /*background-color:#108EE9;*/
                /*color: #fff;*/
                /*border-radius:50%;*/
                /*line-height: 20px;*/
                /*text-align: center;*/
                /*font-size: 12px*/
            /*}*/
        /*}*/
        .card {
            /*width: 3.59rem;*/
            margin: 0.08rem auto 0rem;
            padding: 0.12rem 0.22rem 0.12rem 0;
            box-shadow: 0 0.02rem 0.06rem 0 rgba(0, 0, 0, 0.04), 0 0.01rem 0.02rem 0 rgba(0, 0, 0, 0.04), 0 0.01rem 0.02rem 0 rgba(0, 0, 0, 0.18);
            border-radius: 10px;
            background-color: #fff;
            .checkbox {
                position: relative;
                top: 0px;
                left: 0px;
                z-index: 9;
                height: 0.26rem;
            }
            .address {
                font-size: 0.14rem;
                color: #4A4A4A;
            }
            .order-id {
                font-size: 0.18rem;
            }
            .name {
                color: #727072;
                font-size: 0.14rem;
                padding-right: 0.1rem;
            }
            .types {
                font-size: 0.12rem;
                text-align: right;
                color: #9B9B9B;
                line-height: 0.22rem;
            }
            .product {
                color: #1F4BA5;
                font-size: 0.12rem;
                line-height: 0.22rem;
            }
            .tel {
                color: #4A90E2;
                font-size: 0.14rem
            }
            .date {
                text-align: right;
                font-size: 0.18rem;
            }
            .status {
                text-align: center;
                line-height: 0.22rem;
            }
            .checkbox {
                text-align: center;
            }
            .img {
                width: 0.3rem;
                height: 0.28rem;
                margin: 0.04rem auto 0;

            }
        }
        .color-red{
            color: red;
        }
        .driver-task-no{
            color: rgb(170, 170, 170);
            text-align: center;
            margin-top: 0.2rem;
            font-size: 0.16rem;
        }
        .dialog-footer{
            position: fixed;
            bottom: 0px;
            left: 0px;
            display: flex;
            z-index: 1000;
            justify-content: space-around;
            /*padding: 0.06rem 0;*/
            background-color: #fff;
            width: 100%;
            height: 0.47rem;
            box-shadow: 0 2px 9px 0 rgba(0,0,0,0.43);
            .btn {
                width: 1.4rem;
                height: 0.47rem;
                background: #108EE9;
                font-size: 0.16rem;
                color: #FFF;
                text-align: center;
                line-height: 0.47rem;
            }
            .bgcolorff976a{
                background-color: #ff976a;
            }
            .bgcolorfff{
                background-color: #fff;
                color: #000;
            }
        }
    }

</style>
